<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>付款结果</title>
    <!-- 引入样式-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>

    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/shopping.css"/>
    <link rel="stylesheet" href="css/buy.css"/>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <style>

    </style>
    <script>
        $(function () {


        });
    </script>

</head>

<body>

<!-- 引入头部 -->
<div>
    <iframe src="header.html" scrolling="no" style="height:140px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<hr style="height: 10px; background-color: #FF4400;"/>

<!-- 商品付款结果 -->
<div class="layui-container" id="app">
    <!--以下是支付成功的提升信息-->
    <div v-if="isPaySatus">
        <div style="text-align: center;">
            <img style="width: 120px" src="images/pay_success001.png"/>
        </div>
        <hr>
        <div class="my-payrel">
            <table>
                <caption>恭喜您，支付成功！</caption>
                <tr>
                    <th width="40%">支付信息</th>
                    <th>状态</th>
                </tr>
                <tr>
                    <td>支付方式</td>
                    <td>微信</td>
                </tr>
                <tr>
                    <td>订单金额</td>
                    <td>{{totalPrice}}</td>
                </tr>
            </table>
        </div>
    </div>

   <!--以下是未支付成功的提示信息--->
    <div v-if="!isPaySatus">
        <div style="text-align: center;">
            <img style="width: 120px" src="images/pay_failure001.png"/>
        </div>
        <hr>
        <div class="my-payrel">
            <table>
                <caption>很遗憾支付失败！</caption>
                <tr>
                    <th width="40%">支付信息</th>
                    <th>状态</th>
                </tr>
                <tr>
                    <td>支付方式</td>
                    <td>微信</td>
                </tr>


            </table>
        </div>
    </div>
</div>
<!-- 商品付款结果end -->
<!--引入底部-->
<div class="my-footer">
    <iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
</div>
<!--引入底部end-->
<script src="js/include/libs.js"></script>

<script>

    let vm = new Vue({
        el: '#app',
        data: {
            isPaySatus: false, //默认没有支付成功。
            totalPrice : 0.0
        },
        mounted() {
            this.checkOrderIsPay();
        },
        methods: {
            checkOrderIsPay() {
                checkOrderIsPay(getQueryVariable("oid")).then(resp => {
                    if (resp.data.code === 200) {
                        this.isPaySatus = resp.data.data;

                        console.log("您的订单是否已经支付：" + resp.data.data);
                        if (resp.data.data) {
                            //更新订单的支付状态
                            changePayStatus(getQueryVariable("oid")).then(resp => {
                                if (resp.data.code === 200) {
                                    //更新订单支付状态成功；
                                    this.isPaySatus = true;
                                    this.totalPrice = resp.data.data.totalPrice;
                                }
                            })
                        }
                    }
                })
            }
        }
    })
</script>
</body>

<style>

    .my-payrel table {
        margin: 0px auto;
        width: 40%;
        border-radius: 4px;
        border-collapse: separate;
        background-color: #ffffff;
        border: solid 1px lightgray;
    }

    .my-payrel table caption {
        margin-bottom: 16px;
    }

    .my-payrel th {
        background-color: #F3BF47;
        color: #FFF;
        font-size: larger;
    }

    .my-payrel td, th {
        text-align: center; /*td单元格的文字水平居中*/
        padding: 4px;

    }

    .my-payrel td {
        color: #666;
    }

</style>

</html>